<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 800px;
      height: 600px;
      background-color: orange;
    }

    li {
      list-style: none;
      width: 100px;
      height: 100px;
      float: left;
      margin: 10px;
      background-color: skyblue;
    }

    button {
      width: 200px;
      height: 50px;
    }
  </style>
</head>
<body>

  <button>插入一个 li</button>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <p>haha我是p标签</p>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>
    // 需求1
    // 点击每个li  获取 标签中间的内容 
    // 我新创建一个li  点击新创建的li 也能获取标签中间的内容 
    // var btn = document.querySelector('button');
    // var lis = document.querySelectorAll('ul > li');
    // lis.forEach(function(item){
    //     item.onclick = function(){
    //         alert(item.innerText);
    //     }
    // });

    // btn.onclick = function(){
    //     var newli = document.createElement('li');
    //     newli.innerText = '我是新来的';
    //     document.querySelector('ul').appendChild(newli);

    // }

    // 这种方式 只能 对原来的元素点击 获取中间的内容  
    // 新创建的元素 无法获取  
    // 通过循环对每一个li绑定点击事件  也就是过多的dom操作  
    // 降低页面渲染的速度 影响性能   


    // 目标 减少对dom的操作 
    // 对于新添加的元素 也能获取标签中间的内容  

    // 解决方案  
    // 事件委托
    // 子元素 委托给父元素全权处理  

    var ulele =  document.querySelector('ul');
    var btn = document.querySelector('button');
    ulele.onclick = function(event){
        var e = event || window.event;
        // alert(e.target.innerText);
        if(e.target.nodeName == 'LI'){
            alert(e.target.innerText);
        }
    }

    btn.onclick = function(){
        for(var i=0;i<6;i++){
            var newli = document.createElement('li');
            newli.innerText = '我是新来的'+i;
            document.querySelector('ul').appendChild(newli);
        }

    }


  </script>

</body>
</html>